<template>
	<view class="zuipageWrap">
		<view class="J_dateWrap uni-flex uni-row" :class="{'zhide': lst_repId}">
			{{startdateDes}} 至 {{enddateDes}}
		</view>
		<block v-for="(item, index) in tableData" :key="index">
			<view class="J_roomOrder">
				<view class="J_card">
					<view class="uni-flex J_card_con">
						<view class="J_left">
							<view class="uni-flex J_row">
								<view class="J_col w2">品名</view>
								<view class="J_col">采购数量</view>
							</view>
							<view class="uni-flex J_row" v-for="(v, index2) in item.druglist" :key="index2">
								<view class="J_col w2 fn-ellip">{{v.name}}</view>
								<view class="J_col">{{v.smnum}}</view>
							</view>
						</view>
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
							<view class="J_right">
								<view class="uni-flex J_row">
									<view class="J_col">配送数量</view>
									<view class="J_col">缺货</view>
									<view class="J_col w1">规格</view>
									<view class="J_col w1" style="width: 70px;">单位</view>
									<view class="J_col" style="width: 200px;">厂商</view>
									<view class="J_col">单价</view>
									<view class="J_col">金额</view>
									<view class="J_col w1">供应商</view>
									<view class="J_col">计划时间</view>
									<view class="J_col">到货时间</view>
								</view>
								<view class="uni-flex J_row" v-for="(v, index3) in item.druglist" :key="index3">
									<view class="J_col">{{v.conum}}</view>
									<view class="J_col">{{v.shortum}}</view>
									<view class="J_col w1">{{v.specifications}}</view>
									<view class="J_col w1" style="width: 70px;">{{v.unit}}</view>
									<view class="J_col fn-ellip" style="width: 200px;">{{v.factory}}</view>
									<view class="J_col">{{v.unitprice | priceFormat(2,'￥',true)}}</view>
									<view class="J_col">{{v.price | priceFormat(2,'￥',true)}}</view>
									<view class="J_col w1">{{v.supplier}}</view>
									<view class="J_col">{{v.audittime}}</view>
									<view class="J_col">{{v.purtime}}</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</block>
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
		
		<uni-drawer :visible="rightDrawerVisible" mode="right" @close="closeRightDrawer" zuiWidth="72" zuiDrawerClass="zuiDrawer">
			<view style="padding: 30upx 20upx;">
				<form @submit="formSubmit" @reset="formReset">
					<view class="section section_gap">
						<view class="section__title">商品名称</view>
						<view class="section_con">
							<input name="invoiceId" placeholder="请输入商品名称" :value="invoiceId" class="zinput J_invoiceId" :maxlength="maxlength" />
						</view>
					</view>
					<view class="section section_gap">
						<view class="section__title">日期选择</view>
						<view class="section_con">
							<picker class="zpicker" mode="date" :value="startdate" :start="mindate" :end="maxdate" @change="bindDateChange">
								<view class="uni-input zinput">{{startdateDes}}</view>
							</picker>
							<text class="zsplit">-</text>
							<picker class="zpicker" mode="date" :value="enddate" :start="startdate" :end="curdate" @change="bindDateChangeS">
								<view class="uni-input zinput">{{enddateDes}}</view>
							</picker>
						</view>
					</view>
					<view class="section section_gap">
						<view class="section__title">供应商</view>
						<view class="section_con">
							<picker class="zpicker" @change="bindPickerChangeD" :value="supplierIndex" :range="supplierList" range-key="name">
								<view class="uni-input zinput">{{supplierList[supplierIndex].name}}</view>
							</picker>
						</view>
					</view>
					<view class="btn-area">
						<button formType="reset" class="J_reset zbtn">重置</button>
						<button formType="submit" type="warn" class="J_sub zbtn">提交</button>
					</view>
				</form>
			</view>
		</uni-drawer>
	</view>
</template>
<script>

import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
import uniIcon from "@/components/uni-icon/uni-icon.vue";
import {zAllRepList, zSupplierList, zDrugStorageList} from '@/util/api';
import {
	mapState,mapGetters,mapMutations,mapActions
} from 'vuex'
export default {
	components: {
		uniDrawer,
		uniIcon
	},
	data() {
		return {
			tableData: [],
			total: 0,
			start: 1,
			pageSize: 5,
			loadMoreText: "加载中...",
			showLoadMore: false,
			rightDrawerVisible: false,
			maxlength: 20,
			invoiceId: '',
			pdname: '',
			startdate: '',
			enddate: '',
			startdateDes: '',
			enddateDes: '',
			mindate: '',
			maxdate: '',
			curdate: '',
			supplierIndex: 0,
			supplierList: [
				{
					id: '',
					name: '全部'
				}
			],
			drugStorageIndex: 0,
			drugStorageList: [
				{
					id: '',
					name: '全部'
				}
			],
			curFupanObj: null,
			lst_repId: null
		}
	},
	computed: {
		...mapState(['w_planIdS', 'w_planNameS'])
	},
	onLoad() {
		let lst_repId = uni.getStorageSync('lst_repId');
		if(lst_repId){
			this.lst_repId = lst_repId;
			uni.removeStorageSync('lst_repId');
		}
		this.initDate();
		this.fetchAllData();
	},
	onUnload() {
		this.resetPage();
	},
	onNavigationBarButtonTap(e) {
		this.rightDrawerVisible = !this.rightDrawerVisible;
	},
	onReachBottom() {
		this.showLoadMore = true;
		if(this.total && this.tableData.length < this.total){
			this.loadMoreText = "加载更多";
			this.fetchData();
		}else if(this.total && this.tableData.length == this.total){
			this.loadMoreText = "没有更多数据了!";
			return;
		}
	},
	onPullDownRefresh() {
		this.resetPage();
		this.fetchData();
	},
	methods: {
		...mapMutations(['w_setPlanIdS']),
		choosePlan () {
			uni.setStorageSync('choosePlanIdFlagS', true);
			uni.navigateTo({
				url: '/pages/inventoryplan/list'
			});
		},
		initDate () {
			let curDate = new Date(),
				cdate = this.zutil.getCurDate(curDate),
				_m = ((curDate.getMonth()+1)<10) ? ("0"+(curDate.getMonth()+1)) : (curDate.getMonth()+1),
				firstdate = curDate.getFullYear()-1 + "-"+ _m + "-01";
				
			this.mindate = '1949-01-01';
			this.maxdate = cdate;
			this.curdate = cdate;
			this.startdate = cdate;
			this.enddate = cdate;
			/* this.startdateDes = '开始日期';
			this.enddateDes = '结束日期'; */
			//this.startdateDes = firstdate;
			this.startdateDes = cdate;
			this.enddateDes = cdate;
		},
		resetPage () {
			this.tableData = [];
			this.total = 0;
			this.start = 1;
			this.loadMoreText = "加载更多";
			this.showLoadMore = false;
		},
		async fetchAllData () {
			let res = await zSupplierList();
			res = this.zutil.formatAxiosData(res);
			let res2 = await zDrugStorageList();
			res2 = this.zutil.formatAxiosData(res2);
			if(res.status == 0){
				this.supplierList = this.supplierList.concat(res.data);
			}else{
				this.zutil.ztip(res.description || "获取供应商列表失败！");
			}
			if(res2.status == 0){
				this.drugStorageList = this.drugStorageList.concat(res2.data);
			}else{
				this.zutil.ztip(res2.message || "获取药库列表失败！");
			}
			this.fetchData();
		},
		async fetchData () {
			let s1 = this.startdateDes,
				s2 = this.enddateDes;
			if(s1 == '开始日期') {
				s1 = '';
			}else{
				s1 = this.startdate;
			}
			if(s2 == '结束日期') {
				s2 = '';
			}else{
				s2 = this.enddate;
			}
			let tpl_param = {
				goodname: this.invoiceId,
				pname: this.pdname,
				startdate: s1,
				enddate: s2,
				drugstorageid: this.drugStorageList[this.drugStorageIndex].id,
				planId: this.w_planIdS,
				page: this.start,
				pagesize: this.pageSize,
				lst_repId: this.lst_repId
			}
			uni.showLoading({title: '加载中', mask: true});
			let res = await zAllRepList(tpl_param);
			res = this.zutil.formatAxiosData(res);
			if(res.status == 0){
				this.tableData = this.tableData.concat(res.data.list);
				this.total = res.data.total;
				this.start++;
			}else{
				this.zutil.ztip(res.description || '获取未确认报表列表失败');
				this.zutil.zuiShaker();
			}
			uni.hideLoading();
			uni.stopPullDownRefresh();
		},
		closeRightDrawer() {
			this.rightDrawerVisible = false;
		},
		formSubmit: function (e) {
			let data = e.detail.value;
			this.invoiceId = data.invoiceId;
			this.pdname = data.pdname;
			this.rightDrawerVisible = false;
			this.lst_repId = null;
			this.resetPage();
			this.fetchData();
		},
		formReset: function (e) {
			this.initDate();
			this.invoiceId = '';
			this.pdname = '';
			this.supplierIndex = 0;
			this.drugStorageIndex = 0;
		},
		
		bindDateChange: function(e) {
			this.startdate = e.target.value;
			this.startdateDes = e.target.value;
		},
		bindDateChangeS: function(e) {
			this.enddate = e.target.value;
			this.enddateDes = e.target.value;
		},
		bindPickerChangeD: function(e) {
			this.supplierIndex = e.target.value;
		},
		bindPickerChangeS: function(e) {
			this.drugStorageIndex = e.target.value;
		},
		pickerClick () {
			this.rightDrawerVisible = false;
		},
		zslide (item, index) {
			let slideFlag = item.slideHide;
			this.$set(item, 'slideHide', !slideFlag);
		},
		choseObj (item, pitem) {
			if(item.check){
				this.$set(item, 'check', false);
				this.curFupanObj = null;
			}else{
				if(this.curFupanObj){
					this.$set(this.curFupanObj, 'check', false);
				}
				this.$set(item, 'check', true);
				this.curFupanObj = item;
				this.curFupanObj.planId = pitem.planid;
				this.curFupanObj.planName = pitem.planname;
				this.curFupanObj.storeId = pitem.storeid;
				this.curFupanObj.storeName = pitem.storename;
			}
		},
		goFupan () {
			if(!this.curFupanObj){
				return false;
			}
			uni.setStorageSync('fupan_temp', JSON.stringify(this.curFupanObj));
			uni.navigateTo({
				url: '/pages/inventory/fupan'
			});
		}
	},
	filters:{
		//价格过滤器
		// arg表示原始参数,num表示小数点位,默认保留两位,symbol表示符号,spilt是否进行逗号分隔【true，false】
		priceFormat:function (arg,num=0,symbol,spilt=false) {
			/**
			 * 默认数字: {{number|priceFormat()}}
				保留两位小数: {{number|priceFormat(2)}}
				保留三位小数: {{number|priceFormat(3)}}
				添加￥符号并保留两位: {{number|priceFormat(2,'￥')}}
				添加$符号并保留三位: {{number|priceFormat(3,'$')}}
				添加千分号符号: {{number|priceFormat(0,'',true)}}
				添加千分号符号并保留两位: {{number|priceFormat(2,'',true)}}
				添加￥和千分号符号并保留两位: {{number|priceFormat(2,'￥',true)}}
			 **/
			arg=Number(arg).toFixed(num);
			if(spilt==true){
				if (arg.indexOf('.') == -1) {
					arg=arg.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				}else{
					var parts = arg.split(".");
					parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
					arg=parts.join(".");
				}
			}
			if(symbol){
				arg=symbol+arg;
			}
			return arg;
		},
	}
}
</script>

<style scoped lang="scss">
.zuipageWrap {
	background: #F5F5F5;
	.J_dateWrap {
		align-items: center;
		background: #f0f0f0;
		justify-content: center;
		padding: 6px;
		border-top: 1px solid #ddd;
		&.zhide {
			display: none;
		}
	}
	.J_roomOrder {
		background: #fff;
		padding: 0;
		margin-bottom: 32upx;
		position: relative;
		box-shadow: 0 6upx 20upx rgba(0,0,0,.1);
		.J_card {
			border-top: 2upx solid #ddd;
			border-bottom: 2upx solid #ddd;
			background: #fff;
			// padding: 0 32upx;
			color: #3C3C3C;
			margin-bottom: 20upx;
			overflow: hidden;
			
			&.isSlide, &:first-child {
				height: auto;
			}
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.uni-row {
				border-bottom: 2upx solid #e5e5e5;
				padding: 18upx 0;
				&.no_border {
					border-bottom: 0;
				}
				&:first-child {
					padding: 28upx 0;
				}
				&:last-child {
					border-bottom: 0;
				}
				&.isSlide {
					display: none!important;
				}
				.J_tit {
					height: 44upx;
					line-height: 44upx;
					font-size: 30upx;
					position: relative;
					padding-left: 32upx;
					font-weight: bold;
					overflow: hidden;
					width: 100%;
					.J_cicon {
						position: absolute;
						left: 0;
						top: 0;
						width:12upx;
						height: 44upx;
						background: #FFC12E;
						display: block;
					}
					.J_slideIcon {
						position: absolute;
						right: 0;
						top: 6upx;
					}
				}
				.J_label {
					width: 184upx;
				}
				.J_des {
					flex: 1;
					position: relative;
					text-align: right;
					.uni-input {
						padding: 0 56upx 0 24upx;
					}
				}
			}
		}
		.J_status {
			position: absolute;
			right: 92upx;
			top: 26upx;
			color: #3C3C3C;
			font-size: 28upx;
			font-weight: bold;
		}
	}
	.price {
		color: #e4a000;
		font-weight: normal;
	}
	.J_totalPrice {
		color: #e4a000;
		font-weight: bold;
	}
}
/**
 * 侧边栏
 **/
.zuiDrawer {
	.zinput {
		div {
			width: 100%;
			padding: 0 10px;
			.input-placeholder {
				font-size: 12px;
			}
		}
	}
	.section_gap {
		margin-bottom: 40upx;
		.section__title {
			font-size: 34upx;
			margin-bottom: 20upx;
			color: #000;
			position: relative;
			padding-left: 20upx;
			
			&:before {
				position: absolute;
				left: 0;
				top: 12upx;
				content: '';
				width: 6upx;
				background: #e64340;
				height: 60%;
			}
		}
		.section_con {
			margin-bottom: 20upx;
			display: flex;
			.zsplit {
				height: 64upx;
				line-height: 64upx;
				text-align: center;
				width: 80upx;
				font-size: 40upx;
				font-weight: normal;
			}
			.zinput {
				display: inline-block;
				width: 100%;
				border: 1px solid #F6F6F6;
				background: #F6F6F6;
				border-radius: 60upx;
				height: 64upx;
				line-height: 64upx;
				text-align: center;
				padding: 0;
				overflow: hidden;
				div {
					width: 100%;
					text-align: center;
					input {
						width: 90%;
						text-align: center;
					}
				}
			}
			.J_tagWrap {
				align-items: center;
				justify-content: space-around;
				width: 100%;
				.J_tag {
					padding: 0 16upx;
					height: 64upx;
					line-height: 64upx;
					width: 100%;
					background: #f6f6f6;
					color: #333;
					text-align: center;
					border-radius: 60upx;
					margin-left: 20upx;
					border: 2upx solid #F1F1F1;
					
					&.zcheck {
						background: #FEF4F3;
						color: #FF0000;
						border: 2upx solid #FF0000;
					}
					
					&:first-child {
						margin-left: 0;
					}
				}
			}
			.zpicker {
				width: 100%;
			}
		}
	}
	.btn-area {
		position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
		height: 92upx;
		.zbtn {
			border: 0;
			border-radius: 0;
			display: inline-block;
			&:after {
				width: 0;
				height: 0;
			}
			&.J_sub {
				width: 65%;
			}
			&.J_reset {
				width: 35%;
			}
		}
	}
}
	
.J_card_con {
	.J_row {
		border-bottom: 1px solid #ddd;
		.J_col {
			height: 40px;
			line-height: 40px;
			border-right: 1px solid #ddd;
			text-align: center;
			&.w1 {
				width: 200px;
			}
			&.w2 {
				width: 150px;
			}
			.zradio {
				margin-left: -28px;
			}
		}
		&.act {
			border-color: #ffc12e;
		}
	}
	.J_left {
		.J_col {
			width: 100px;
			&:first-child {
				border-left: 1px solid #ddd;
			}
		}
	}
	.J_right {
		width: 1250px;
		.J_col {
			width: 100px;
		}
	}
}
.uni-btn-v {
	display: flex;
	justify-content: center;
	&.J_foot {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		box-shadow: 0px 0px 20upx rgba(0,0,0,0.2);
		padding: 0;
	}
	.zbtn {
		width: 24%;
		font-size: 32upx;
		display: block;
		border-radius: 0;
		margin: 0;
		height: 100upx;
		line-height: 100upx;
		background: #fff;
		&:after {
			width: 0;
			height: 0;
		}
	}
	.J_last {
		background: #eabc4f;
		color: #fff;
	}
	.J_cancel {
		color: #000;
	}
	.J_sub {
		background: #018DEE;
		color: #fff;
		flex: 1;
		&.disa {
			background: #cacaca;
		}
	}
}
.zuipageWrap {
	padding-bottom: 50px;
}
</style>
